<template>
    <div class="movie-list-page">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" :fixed="true" :title="$t('m.Movie')"/>
        <div style="padding: 23px"></div>
        <van-tabs class="map-tabs"
                  :line-width="tabWidth"
                  sticky
                  :offset-top="46"
                  v-model="activeTab">
            <van-tab :title="$t('m.Nowshowing')">
                <van-list
                    v-model="showingLoading"
                    :finished="showingFinished"
                    loading-text=" "
                    @load="getShowingList"
                    class="movie-list">
                    <div @click="goMovieDetail(item)" v-for="(item, index) in showingData" :key="'showing_' + index" class="list-item">
                        <van-card
                            :title="item.title"
                        >
                            <div slot="thumb" class="movie-cover">
                                <img v-lazy="item.coverPhoto" alt=""  />
                            </div>
                            <div slot="desc" class="movie-desc">
                                <p>{{getGenreTypeText(item.genreTypes)}}</p>
                                <p>
                                    <span v-if="item.durationHour || item.durationMinute">{{getDurationtime(item.durationHour, item.durationMinute)}} |</span>
                                    <span>{{item.language}}</span>
                                </p>
                                <p>{{item.cast}}</p>
                            </div>
                            <div slot="footer">
                                <van-button size="mini" @click.stop="goShowTime">{{$t('m.Showtime')}}</van-button>
                            </div>
                        </van-card>
                    </div>
                </van-list>
            </van-tab>
            <van-tab :title="$t('m.Comingsoon')">
                <van-list
                    v-model="comingLoading"
                    :finished="comingFinished"
                    loading-text=" "
                    :lazy-load="true"
                    @load="getComingList"
                    class="movie-list">
                    <div @click="goMovieDetail(item)" v-for="(item, index) in comingData" :key="'showing_' + index" class="list-item">
                        <van-card
                            :title="item.title"
                        >
                            <div slot="thumb" class="movie-cover">
                                <img v-lazy="item.coverPhoto" alt=""  />
                            </div>
                            <div slot="desc" class="movie-desc">
                                <p>{{getGenreTypeText(item.genreTypes)}}</p>
                                <p>
                                    <span v-if="item.durationHour || item.durationMinute">{{getDurationtime(item.durationHour, item.durationMinute)}} |</span>
                                    <span>{{item.language}}</span>
                                </p>
                                <p>{{item.cast}}</p>
                            </div>
                            <div slot="footer">
                                <van-button size="mini" class="coming-show-btn" @click.stop="goShowTime">{{$t('m.Showtime')}}</van-button>
                            </div>
                        </van-card>
                    </div>
                </van-list>
            </van-tab>
        </van-tabs>
        <div style="padding:40px;"></div>
        <footer-bar ref="footer" footerBar="movie"></footer-bar>
    </div>
</template>
<script>
    import {showingList, comingShowList, busLineListByStop} from '../../static/api/mgc_api'
    import genre from '../../static/json/genre'
    import mm_genre from '../../static/mmJson/genre'

    import FooterBar from '@/components/FooterBar'
    export default {
        name: "MovieList",
        components: {
            FooterBar
        },
        data() {
            return {
                activeTab: 0,
                tabWidth: 0,
                showingLoading: false,
                showingFinished: false,
                showingData: [],
                showingPageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                comingLoading: false,
                comingFinished: false,
                comingData: [],
                comingPageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
            }
        },
        computed: {
            genreJson() {
                if (this.$store.state.store.localLang == 'MM') {
                    return mm_genre
                } else {
                    return genre
                }
            },
        },
        methods: {
            goShowTime() {
              console.log(1111)
            },
            goMovieDetail(item) {
                this.$router.push({
                    path:'/movie/movie-detail',
                    query:{
                        id: item.id
                    }
                })
            },
            getDurationtime(hours, mins){
                let str = ''
                if (hours) {
                    if (mins) {
                        str = hours * 60 + mins + ' min'
                    } else {
                        str = hours * 60+ ' min'
                    }
                } else {
                    if (mins) {
                        str = hours * 60 + mins + ' min'
                    }
                }
                return str
            },
            getGenreTypeText(geners){
                let str = ''
                for(let i=0; i<geners.length; i++){
                    if (i == 0) {
                        str= this.getGenreTypesItem(geners[i])
                    } else {
                        str= str + ' / ' + this.getGenreTypesItem(geners[i])
                    }
                }
                return str
            },
            getGenreTypesItem (it) {
                let str = ''
                this.genreJson.forEach((item) => {
                    if (item.value == it) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getShowingList() {
                let searchForm = {};
                searchForm.pageNum = this.showingPageData.pageNum
                searchForm.pageSize = this.showingPageData.pageSize
                showingList(searchForm).then((res) => {
                    if (res.data.data.errorID == 0) {
                        let datas = res.data.data.object
                        if (this.showingPageData.pageNum == 1) {
                            window.scrollTo(0, 0)
                            this.showingData = datas.list
                            this.showingFinished = false;
                        } else {
                            this.showingData = this.showingData.concat(datas.list)
                        }
                        // console.log(this.showingData, 'this.showingData')
                        // // 分页信息配置
                        this.showingPageData.pageNum = this.showingPageData.pageNum + 1
                        this.showingLoading = false
                        if (this.showingPageData.pageNum > datas.pages) {
                            this.showingFinished = true
                        }
                    } else {
                        this.$toast(res.data.message)
                        this.showingFinished = true
                        this.showingLoading = false
                    }

                }).catch((e) => {
                    console.log(e)
                    this.$toast('No internet, please try again')
                    this.showingFinished = true
                    this.showingLoading = false
                })
            },
            getComingList() {
                let searchForm = {};
                searchForm.pageNum = this.comingPageData.pageNum
                searchForm.pageSize = this.comingPageData.pageSize
                comingShowList(searchForm).then((res) => {
                    if (res.data.data.errorID == 0) {
                        let datas = res.data.data.object
                        if (this.comingPageData.pageNum == 1) {
                            window.scrollTo(0, 0)
                            this.comingData = datas.list
                            this.comingFinished = false;
                        } else {
                            this.comingData = this.comingData.concat(datas.list)
                        }
                        // console.log(this.comingData, 'this.comingData')
                        // // 分页信息配置
                        this.comingPageData.pageNum = this.comingPageData.pageNum + 1
                        this.comingLoading = false
                        if (this.comingPageData.pageNum > datas.pages) {
                            this.comingFinished = true
                        }
                    } else {
                        this.$toast(res.data.message)
                        this.comingFinished = true
                        this.comingLoading = false
                    }

                }).catch((e) => {
                    console.log(e)
                    this.$toast('No internet, please try again')
                    this.comingFinished = true
                    this.comingLoading = false
                })
            },
        },
        mounted(){
            this.tabWidth = document.body.clientWidth/2 - 1;
        }
    };
</script>
<style>
    .movie-list-page .van-nav-bar{
        background-color: #fff;
        /*background-color: #f2f2f2;*/
        color: #333;
        z-index: 9;
    }
    .movie-list-page .van-nav-bar .van-icon{
        color: #C8C8C8;
        margin-right: 15px;
        font-size: 18px;
    }
    .movie-list-page .van-nav-bar .van-nav-bar__title{
        color: #333;
    }
    .movie-list-page .van-tab{
        border-right: 1px solid #eee;
    }
    .movie-list-page .van-tab:last-child{
        border-right: none;
    }
    .movie-list-page .van-card__thumb{
        height: 123px;
        /*top: 8px;*/
    }
    .movie-list-page .van-card{
        height: 140px;
        padding: 8px 15px 8px 15px;
        font-size: 14px;
        background-color: #fff;

    }
    .movie-list-page .van-card:active{
        background: #eee;
    }
    .movie-list-page .van-card__footer .van-button{
        padding: 0 6px;
    }
    .movie-list-page .van-button--mini{
        width: auto;
        background: #ff4d64;
        color: #fff;
        border: none;
    }
    .movie-list-page .van-button--mini.coming-show-btn{
        background: #349cec;
    }
    .movie-list-page .van-card__thumb img{
        width: 100%;
        height: 100%;
    }
    .movie-list-page .van-card__header{
        position: relative;
    }
    .movie-list-page .van-card__footer{
        position: absolute;
        right: 15px;
        bottom: 10px;
    }
</style>
<style>
    .movie-list .movie-desc p{
        margin: 0;
        color: rgb(102, 102, 102);
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 20px;
        font-size: 12px;
    }
    .movie-list .list-item{
        border-top: 1px solid #eee;
    }
    .movie-list .list-item:first-child{
        border-top: none;
    }
    .movie-cover{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: #f0f0f0;
    }
    .movie-cover::before{
        content: "happygogo";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        background: #f0f0f0;
        font-size: 1.1rem;
        font-weight: 700;
        color: #c0bfbf;
        /*line-height: 135px;*/
        z-index: -1;
        margin-top: -12px;
    }
</style>
